<template>
  <view class="container">
    <view class="mains" style="margin-bottom: unset" v-if="!form.disabled">
      <view class="mains-all">
        <view class="mains-all-title">
          <text>{{ $t('shift') }}</text>
        </view>
        <scroll-view
          scroll-x="true"
          scroll-with-animation
          :scroll-into-view="minSelCrt"
          :enable-flex="true"
          :show-scrollbar="false"
          class="scrollview-box"
        >
          <view class="mains-all-one">
            <text
              @click="handleGourl(item, index)"
              :id="'minCla' + index"
              v-for="(item, index) in numList"
              :key="index"
              >{{ item.shiftName }}</text
            >
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="mains">
      <view class="mains-all">
        <view class="mains-all-title">
          <text>{{ $t('selected_shift') }}</text>
        </view>
        <scroll-view
          scroll-x="true"
          scroll-with-animation
          :scroll-into-view="minSelCrts"
          :enable-flex="true"
          :show-scrollbar="false"
          class="scrollview-box"
        >
          <view class="mains-all-one">
            <view
              @click="handleGourls(item, index)"
              :id="'minClas' + index"
              v-for="(item, index) in chooseArr"
              :key="index"
              :class="tabNum == index ? 'actives' : 'outactives'"
              class="d-rn d-ac next"
            >
              <text>{{ item.shiftName }}</text>
              <image
                v-if="!form.disabled"
                src="../../static/img/close2.png"
                mode=""
                @click="handleDel(index)"
              ></image>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <view class="form">
      <view class="form-one d-rn d-ac d-jb">
        <text>{{ $t('cycle_shift') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          :disabled="form.disabled"
          placeholder-style="color:#999999;"
          v-model="form.cycleName"
        />
      </view>
      <view class="form-one d-rn d-ac d-jb">
        <text>{{ $t('cycle_shift_code') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          :disabled="form.disabled"
          placeholder-style="color:#999999;"
          v-model="form.cycleCode"
        />
      </view>

      <view class="form-two d-cn">
        <text>{{ $t('Remarks') }}</text>
        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          :disabled="form.disabled"
          :placeholder="$t('Please_enter_remarks')"
          placeholder-style="color:#999999;"
          v-model="form.remark"
        ></textarea>
      </view>
    </view>
    <view
      class="footer d-rn d-ac d-jc"
      @click="handleAddBanCi"
      v-if="!form.disabled"
    >
      <text class="d-rn d-ac d-jc">{{ $t('Save') }}</text>
    </view>
  </view>
</template>

<script>
var _self;
import { classesList, Addcycle, updatecycle } from "../../api/index.js";
export default {
  data() {
    return {
      tabNum: 0,
      // 中部分类==选择
      minCla: 0,
      // 底部分类滑动描点
      minSelCrt: null,
      numList: [],
      chooseArr: [],

      tabNums: 0,
      // 中部分类==选择
      minClas: 0,
      // 底部分类滑动描点
      minSelCrts: null,
      form: {
        id: null,
        cycleName: null,
        cycleCode: null,
        remark: null,
        classes: [],
        chooseArr: [],
      },
      name: "",
    };
  },
  onLoad(options) {
    _self = this;
    if (options && options.data) {
      _self.name = JSON.parse(decodeURIComponent(options.data)).titleName;
      if (_self.name == this.$t('add_new')) {
        _self.form = {
          id: null,
          cycleName: null,
          cycleCode: null,
          remark: null,
          classes: [],
          chooseArr: [],
        };
      } else {
        _self.form = JSON.parse(decodeURIComponent(options.data));
        console.log(_self.form);
        _self.chooseArr = _self.form.shiftDTOList;
      }
    }
    _self.getclassesList();
  },
  methods: {
    getclassesList() {
      classesList().then((res) => {
        if (res.code == 200) {
          _self.numList = res.data;
        }
      });
    },
    handleGourl(val, index) {
      _self.tabNum = index;
      if (index > 0 && index < _self.numList.length) {
        _self.$nextTick(() => {
          _self.minSelCrt = "minCla" + (index - 1);
        });
      }
      _self.chooseArr.push(val);
    },
    handleGourls(val, index) {
      if (this.form.disabled) return;
      _self.tabNum = index;
      if (index > 0 && index < _self.numList.length) {
        _self.$nextTick(() => {
          _self.minSelCrt = "minCla" + (index - 1);
        });
      }
    },
    handleDel(index) {
      _self.chooseArr.splice(index, 1);
    },
    handleAddBanCi() {
      this.form.shiftGroup = this.chooseArr.map((item) => item.id).toString();
      if (this.form.createTime) {
        delete this.form.createTime;
      }
      if (_self.name == this.$t('add_new')) {
        Addcycle(this.form).then((res) => {
          if (res.code == 200) {
            _self.$commonFun.showTips(res.msg);
            setTimeout(function () {
              _self.$commonFun.goUrl(1, "../shiftRoom/index");
            }, 2000);
          }
        });
      } else {
        updatecycle(this.form).then((res) => {
          if (res.code == 200) {
            _self.$commonFun.showTips(res.msg);
            setTimeout(function () {
              _self.$commonFun.goUrl(1, "../shiftRoom/index");
            }, 2000);
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
.container {
  width: 100%;
  .mains {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
    background-color: #ffffff;
    &-all {
      width: 86%;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      font-size: 16px;
      text-align: center;
      white-space: nowrap;
      scroll-view {
        width: 80%;
      }
      &-one {
        width: 80%;
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        padding: 0 20rpx;
        box-sizing: border-box;
        text {
          margin-right: 40rpx;
          font-size: 26rpx;
          color: #333333;
        }
        .actives {
          color: red;
        }
        .next {
          border: 1px solid #ffd92a;
          background-color: #fef9e7;
          border-radius: 2em;
          padding: 10rpx 24rpx;
          box-sizing: border-box;
          margin-right: 16rpx;
          image {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
      &-title {
        padding: 22rpx 34rpx;
        box-sizing: border-box;
        text {
          width: 120rpx;
          display: inline-block;
          font-size: 28rpx;
          color: #333333;
          text-align: left;
        }
      }
    }
  }
  .form {
    width: 100%;
    &-one {
      padding: 24rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      padding-bottom: 25rpx;
      border-bottom: 1px solid #eeeeee;
      text {
        font-size: 28rpx;
        color: #6c6c6c;
      }
      input {
        font-size: 28rpx;
        color: #6c6c6c;
        text-align: right;
      }
    }
    &-two {
      padding: 24rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      padding-bottom: 25rpx;
      border-bottom: 1px solid #eeeeee;
      text {
        font-size: 28rpx;
        color: #6c6c6c;
      }
      textarea {
        width: 100%;
        font-size: 28rpx;
        color: #6c6c6c;
        margin-top: 16rpx;
      }
    }
  }
  .footer {
    width: 100%;
    height: 134rpx;
    background-color: #ffffff;
    margin-top: 20rpx;
    text {
      width: 702rpx;
      height: 86rpx;
      border-radius: 2em;
      background-color: #fed52b;
      font-size: 34rpx;
      color: #333333;
    }
  }
}
</style>
